import React, { useRef, useEffect, useState } from "react";
import * as echarts from "echarts";
import { fetchEchartData } from "../request/hytApi";

const NightingaleChart = () => {
  const chartRef = useRef(null); // 使用 useRef 来引用图表容器
  const [chartData, setChartData] = useState([]); // 用于存储图表数据

  // 获取图表数据
  const fetchEchartDataFn = async () => {
    const res = await fetchEchartData();
    // console.log(res.data.drugsdatas.yesterdayChart);
    setChartData(res.data.drugsdatas.yesterdayChart);
  };

  // 更新图表的配置
  const option = {
    title: {
      text: "昨日医疗器材消耗占比", // 标题文本
      left: "center", // 标题位置，'center'表示居中
      textStyle: {
        color: "#3c3d3e", // 标题颜色
        fontSize: 16, // 标题字体大小
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [25, 110],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: chartData, // 使用 chartData 渲染图表
      },
    ],
  };

  useEffect(() => {
    fetchEchartDataFn(); // 组件加载时获取数据
  }, []); // 仅在组件首次加载时发起数据请求

  useEffect(() => {
    if (chartRef.current && chartData.length > 0) {
      const chartInstance = echarts.init(chartRef.current); // 初始化 ECharts 实例
      chartInstance.setOption(option); // 设置配置项

      // Resize event listener
      const handleResize = () => chartInstance.resize(); // 定义处理函数

      window.addEventListener("resize", handleResize); // 注册 resize 事件

      // 清理函数：组件卸载时销毁图表实例，并清除 resize 事件监听器
      return () => {
        chartInstance.dispose(); // 销毁 ECharts 实例
        window.removeEventListener("resize", handleResize); // 清除 resize 事件监听器
      };
    }
  }, [chartData]); // 每次 chartData 更新时重新渲染图表

  return (
    <div
      ref={chartRef}
      style={{ width: "100%", height: "300px" }} // 设置图表容器的宽度和高度
    ></div>
  );
};

export default NightingaleChart;
